<template>
  <div class="file-viewer">
    <div class="content">
      <div class="loading" v-if="fileLoading">
        <div style="display: flex; align-items: center">
          <svg
            viewBox="0 0 800 800"
            xmlns="http://www.w3.org/2000/svg"
            style="width: 24px; height: 24px; margin-right: 4px"
          >
            <circle
              class="spin2"
              cx="400"
              cy="400"
              fill="none"
              r="200"
              stroke-width="40"
              stroke="#0256FF"
              stroke-dasharray="800 1400"
              stroke-linecap="round"
            />
          </svg>
          文档正在加载中...
        </div>
        <div class="loading-hint">如果文档长时间无法加载，请尝试重新从文件列表打开</div>
      </div>

      <gc-spread-sheets class="xlsx-preview-container" @workbookInitialized="initSpread">
      </gc-spread-sheets>
    </div>
  </div>
</template>

<script>
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
import * as GC from '@grapecity/spread-sheets'
import request from '@/api/request'
import * as ExcelIO from '@grapecity/spread-excelio'
import { GcSpreadSheets } from '@grapecity/spread-sheets-vue'

export default {
  name: 'App',
  components: {
    GcSpreadSheets,
  },
  data() {
    return {
      fileLoading: true,
    }
  },
  methods: {
    initSpread: function (spread) {
      this.spread = spread
      let sheet = this.spread.getActiveSheet()
      sheet.getCell(0, 0).vAlign(GC.Spread.Sheets.VerticalAlign.center).value('SpreadJS')
    },
    changeFileDemo(e) {
      this.importExcelFile = e.target.files[0]
    },
    loadExcel() {
      let spread = this.spread
      let excelIo = new ExcelIO.IO()
      let excelFile = this.importExcelFile
      excelIo.open(
        excelFile,
        function (json) {
          spread.fromJSON(json)
        },
        function (error) {
          console.log(error)
        },
      )
    },
  },
  mounted() {
    const fileUrl = this.$route.query.fileUrl || ''
    const fileName = this.$route.query.fileName || ''
    document.title = fileName || 'Excel文档预览'
    const that = this
    if (fileUrl) {
      request
        .post(
          '/api/file/filestream?filePath=' + encodeURIComponent(fileUrl),
          {},
          { responseType: 'blob' },
        )
        .then((res) => {
          let spread = that.spread
          let excelIo = new ExcelIO.IO()
          excelIo.open(
            res,
            function (json) {
              spread.fromJSON(json)
              that.fileLoading = false
              const index = json.sheets['Evaluation Version'].index
              that.spread.removeSheet(index)
            },
            function (error) {
              console.error(error)
              that.fileLoading = false
            },
          )
        })
        .catch(() => {
          that.fileLoading = false
        })
    }
  },
}
</script>

<style scoped>
.file-viewer {
  height: 100vh;
  /* display: flex; */
  /* flex-direction: column; */
  overflow: auto;
  background-color: #f5f5f5;
}

.header {
  background-color: #fff;
  padding: 16px 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 10;
  transition: transform 0.3s ease-in-out;
}

.header-hidden {
  transform: translateY(-100%);
}

.opacity-0 {
  opacity: 0;
}

.header h1 {
  margin: 0;
  font-size: 20px;
  color: #333;
}

.content {
  flex: 1;
  overflow: auto;
}

.xlsx-preview-container {
  height: 100vh;
  overflow: auto;
}

.error-message {
  color: #f56c6c;
  padding: 20px;
  text-align: center;
  font-size: 16px;
}

.loading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #333;
  text-align: center;
  background-color: #fff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  padding: 10px 12px;

  position: absolute;
  top: 50px;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

.loading-hint {
  font-size: 12px;
  color: #999;
  margin-top: 8px;
  max-width: 400px;
  line-height: 1.5;
}

@keyframes spin2 {
  0% {
    stroke-dasharray: 1, 800;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 400, 400;
    stroke-dashoffset: -200px;
  }
  100% {
    stroke-dasharray: 800, 1;
    stroke-dashoffset: -800px;
  }
}

.spin2 {
  transform-origin: center;
  animation:
    spin2 1.5s ease-in-out infinite,
    spin 2s linear infinite;
  animation-direction: alternate;
}

.error {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 200px;
  font-size: 16px;
  color: #f56c6c;
  text-align: center;
}

.retry-button {
  margin-top: 16px;
  padding: 8px 24px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.retry-button:hover {
  background-color: #66b1ff;
}

.retry-button:active {
  background-color: #3a8ee6;
}
</style>
